<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>馆藏图书</title>
    <!--  引入核心皮肤-->
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <!--   引入核心js-->
    <script src="../../layui/layui.js"></script>
    <script >
        layui.use(['layer','jquery','table','form'],function () {
            let layer=layui.layer;//定义组件
            let $=layui.jquery;//定义组件
            let table =layui.table;//定义表格组件
            let form=layui.form;//定义表格组件
            table.render({
                elem:'#dg',
                url:'../../torf/selectByPaper',
                page:true,//开启分页
                method:"post",
                parseData:function (res) {

                    return{
                        "code":0,
                        "msg":"",
                        "count":1000,
                        "data":res
                    }
                },
                cols: [[ //表头
                    {field: 'qno', title: '判断题题号',type:'checkbox'}
                    ,{field: 'question', title: '判断题题干'}
                    ,{field: 'answer', title: '判断题答案',align:'center'}
                    ,{field: 'check', title: '判断题解析',align:'center'}
                    ,{field: 'subject', title: '所属科目',align:'center'}
                ]],
                done: function(res, curr, count){
                    $(".layui-table-box").find("[data-field='id']").css("display","none");

                    $("[data-field='answer']").children().each(function(){
                        if($(this).text()=='1'){
                            $(this).text("是")
                        }else if($(this).text()=='0'){
                            $(this).text("否")
                        }
                    });
                    pageCurr=curr;
                }
            });

            //条件查询
            $("#btn-search").click(function () {
                table.reload('dg',{
                    where :{
                        question:$("#question").val(),
                        subject:$("#subject").val()
                    }
                })
            })

            //删除操作
            $("#btn-remove").click(function () {
                let array=table.checkStatus('dg').data;
                if(array.length==0){
                    layer.msg('请选择要修改的数据');
                }else if(array.length>1){
                    layer.msg('只能选择一条记录进行修改')
                }else{
                    $.post('../../torf/deleteOne/'+array[0].qno,function (flag) {
                        if(flag){
                            layer.msg('操作成功',{icon:6});
                            table.reload('dg');//刷新表格
                        }else{
                            layer.msg('操作成失败',{icon:5});
                        }
                    })

                }
            })

            //添加
            $("#btn-add").click(function () {
                layer.open({
                    title:'添加一道判断题',
                    type:1,
                    content:$("#add-dialog").html(),
                    area:['600px']
                })
                form.render();//渲染表单组件的，如果组件不出来可以调用该方法进行重新渲染

                // //调用初始化下拉列表方法add-select-option
                // $.post('../../category/findAllCategory',function (data) {
                //     for(let i in data){
                //         $("#add-select-option").append('<option value="'+data[i].cateid+'">'+data[i].catename+'</option>');
                //     }
                //     form.render();//渲染表单组件的，如果组件不出来可以调用该方法进行重新渲染
                // })

                //监听添加提交表单
                form.on('submit(add-form-submit)',function (data) {
                    $.post('../../torf/insertOne',data.field,function (flag) {
                        if(flag){
                            layer.msg('添加题目信息成功',{icon:6});
                            table.reload("dg");//刷新表格
                            layer.closeAll('page');//关闭当前对话框
                        }else{
                            layer.msg('添加题目信息失败',{icon:5});
                        }
                    })

                    return false;//阻止表单提交action属性的值

                })

            })

            //修改
            $("#btn-edit").click(function () {
                let array=table.checkStatus('dg').data;
                if(array.length==0){
                    layer.msg('请选择要修改的数据');
                }else if(array.length>1){
                    layer.msg('只能选择一条记录进行修改')
                }else{
                    //弹出修改对话框
                    layer.open({
                        title:'修改图书信息',
                        type:1,
                        content:$("#edit-dialog").html(),
                        area:['600px']
                    })
                    form.val('load-edit-form-data',{
                        question:array[0].question,
                        answer:array[0].answer,
                        subject:array[0].subject,
                        check:array[0].check,
                        qno:array[0].qno
                    })
                    form.render();//重新渲染表单组件，组件就可以显示页面中
                    //在此编写ajax代码，请求后端进行修改操作
                    form.on('submit(edit-form-submit)',function (data) {
                        $.post('../../torf/update',data.field,function (flag) {
                            if(flag){
                                layer.msg('修改题目成功',{icon:6});
                                layer.closeAll('page');
                                table.reload('dg');
                            }else{
                                layer.msg('修改题目失败',{icon:6});
                            }
                        })
                        return false;//阻住提交表单标签action属性值
                    })
                }
            })

        })

    </script>

    <!--  定义一个添加对话框，借助js代码在浏览器解析时不会显示js内容-->
    <script id="add-dialog" type="text/html">
        <form  class="layui-form" id="add-form">
            <div class="layui-form-item">
                <input type="text" name="question" required  lay-verify="required"
                       placeholder="请输入题干" class="layui-input">

            </div>
            <div class="layui-form-item"placeholder="请输入答案">
                    <input  type="radio" name="answer" value="1" title="对">
                    <input type="radio" name="answer" value="0" title="错" checked>
            </div>
            <div class="layui-form-item">
                <input type="text" name="subject" required  lay-verify="required"
                       placeholder="请输入科目" class="layui-input">
            </div>
            <div class="layui-form-item">
                <textarea name="check" placeholder="请输入解析" class="layui-textarea"></textarea>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn"  lay-submit lay-filter="add-form-submit">保存</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </script>

    <!--  定义一个修改对话框-->
    <script id="edit-dialog" type="text/html">
        <form  class="layui-form" id="edit-form" lay-filter="load-edit-form-data">


            <div class="layui-form-item">
                <input type="text" name="question" required  lay-verify="required"
                       placeholder="请输入题干" class="layui-input">
                <input type="hidden" name="qno" class="layui-input">
            </div>
            <div class="layui-form-item"placeholder="请输入答案">
                <input  type="radio" name="answer" value="1" title="对">
                <input type="radio" name="answer" value="0" title="错" checked>
            </div>
            <div class="layui-form-item">
                <input type="text" name="subject" required  lay-verify="required"
                       placeholder="请输入科目" class="layui-input">
            </div>
            <div class="layui-form-item">
                <textarea name="check" placeholder="请输入解析" class="layui-textarea"></textarea>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn"  lay-submit lay-filter="edit-form-submit">保存</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </script>
</head>
<body>

<div class="demoTable">
    <div class="layui-inline">
        <input class="layui-input" id="question" placeholder="请输入题干" >
    </div>
    <div class="layui-inline">
        <input class="layui-input" id="subject" placeholder="请输入科目" >
    </div>
    <button class="layui-btn"  id="btn-search"><i class="layui-icon">&#xe615;</i>查询</button>
    <button class="layui-btn layui-btn-normal" id="btn-add" ><i class="layui-icon">&#xe624;</i>添加</button>
    <button class="layui-btn layui-btn-warm" id="btn-edit" ><i class="layui-icon">&#xe642;</i>修改</button>
    <button class="layui-btn layui-btn-danger"  id="btn-remove"><i class="layui-icon">&#xe640;</i>删除</button>
</div>
<table id="dg"></table>
</body>
</html>